<template>
  <div v-loading="isloading" class="prossececontainer">
   <div>
      <table-header
        ref="header"
        :filename="name"
        @keychange="keychange"
        @cityChange="cityChange"
        @areaChange="areaChange"
        @getData="downloadlist"
      >
      </table-header>
</div>
    <div>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="eltable"
      >
        <el-table-column label="序号" width="100" type="index" />
        <el-table-column prop="city" label="所属市" width="180" />
        <el-table-column prop="country" label="所属区县" width="180" />
        <el-table-column prop="town" label="所属乡镇" width="180" />
        <el-table-column prop="village" label="村庄名" />
         <el-table-column prop="state" label="审查结果" width="180" >
         <template slot-scope="scope">
           <span v-if="scope.row.state==true">已通过</span>
           <span v-if="scope.row.state==false">未通过</span>
        </template>
        </el-table-column>  
        <el-table-column prop="message" label="检测结果报告" width="180" />
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="queryrecord(scope.row)"
              ><i class="el-icon-search"></i>查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<script>
import tableHeader from "../components/TableHeader";
import { achievementslistlook } from "@/api/shenhe.js";
export default {
  data() {
    return {
      tableData: [],
      listquery: {
        pageSize: 10,
        currentPage: 1,
        city: null,
        country: null,
        key: "",
      },
      name:"",
      isloading:false

    };
  },
    components: {
    tableHeader,
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      this.isloading = true;
      let res = await achievementslistlook(this.listquery);
      this.tableData = res.data.content;
      this.total =  res.data.totalElements;
      this.isloading = false;
    },
     queryrecord(row) {
      this.$store.dispatch("setRowCache", row);
      this.$router.push("/approval");
    },
    downloadlist() {

    },
    keychange(data) {
      this.listquery.key = data;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    cityChange(data) {
      this.listquery.city = data;
      this.listquery.country = null;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    areaChange(data) {
      this.listquery.city = data.city;
      this.listquery.country = data.country;
      this.listquery.currentPage = 1;
      this.getdata();
    },
    bbb(row){

    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
.prossececontainer{
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}
</style>